<template>
    <el-container>
        <el-header>学生信息管理</el-header>
        <el-main>
            <!--搜索区域-->
            <el-form :inline="true" class="demo-form-inline">
                <el-form-item label="学号">
                    <el-input v-model="studentNo" placeholder="请输入学号"></el-input>
                </el-form-item>

                <el-form-item label="姓名">
                    <el-input v-model="name" placeholder="请输入姓名"></el-input>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="search">搜索</el-button>
                </el-form-item>
            </el-form>
            <!--添加、删除按钮区域-->
            <el-row>
                <el-button @click="showDialog" type="primary" size="small" style="margin-right: 10px">添加</el-button>
                <el-popconfirm  title="确定删除吗？" @confirm="batchDelete"  >
                    <el-button slot="reference" type="danger" size="small">批量删除</el-button>
                </el-popconfirm>
            </el-row>
            <!--学生信息表-->
            <el-table
                    :data="tableData"
                    @selection-change="handleSelectionChange"
                    style="width: 100%">
                <el-table-column
                        type="selection"
                        width="55">
                </el-table-column>

                <el-table-column
                        prop="id"
                        label="ID">
                </el-table-column>
                <el-table-column
                        prop="studentNo"
                        label="学号">
                </el-table-column>
                <el-table-column
                        prop="name"
                        label="姓名">
                </el-table-column>

                <el-table-column
                        prop="age"
                        label="年龄">
                </el-table-column>
                <el-table-column
                        prop="clazz"
                        label="班级">
                </el-table-column>
                <el-table-column
                        prop="major"
                        label="专业">
                </el-table-column>
                <el-table-column
                        prop="schoolYear"
                        label="入学时间">
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button
                                size="mini"
                                @click="handleEdit(scope.$index, scope.row)">编辑
                        </el-button>
                        <el-button
                                size="mini"
                                type="danger"
                                @click="handleDelete(scope.$index, scope.row)">删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!--分页插件位置-->
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="page"
                    :page-sizes="[5, 10, 15, 20]"
                    :page-size="limit"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </el-main>

        <!--弹出层-->
        <el-dialog :title="title" :visible.sync="dialogFormVisible">
            <el-form :model="form" label-width="70px">

                <el-form-item label="ID" v-if="false">
                    <el-input v-model="form.id" autocomplete="off"></el-input>
                </el-form-item>

                <el-form-item label="学号">
                    <el-input v-model="form.studentNo" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="姓名">
                    <el-input v-model="form.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="年龄">
                    <el-input v-model="form.age" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="班级">
                    <el-input v-model="form.clazz" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="专业">
                    <el-input v-model="form.major" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="入学时间">
                    <el-date-picker type="date" placeholder="选择日期" v-model="form.schoolYear" style="width: 100%;"></el-date-picker>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveOrUpdate">确 定</el-button>
            </div>
        </el-dialog>
    </el-container>
</template>

<script>
    export default {
        name: "Student",
        data() {
            return {
                tableData: [],
                // 弹出层显示和隐藏控制
                dialogFormVisible: false,
                //  存放 批量删除id的数组
                multipleSelection: [],
                page: 1,
                limit: 5,
                total: 100,
                form: {},
                studentNo: '',
                name: '',
                title: ''
            }
        },
        methods: {

            //  添加或修改方法
            saveOrUpdate(){
                this.$http.post("/student/saveOrUpdate",this.form).then(response=>{
                    //  判定 添加或修改是否成功
                    if(response.data.code==0){
                        this.$message.success(response.data.msg)
                        this.form = {}
                        this.dialogFormVisible =false
                        this.load();  // 刷新表格
                    }
                }).catch(error=>{
                    this.$message.error("请求失败")
                })

            },

            // 查询列表
            load(){
                    // 发送异步请求  ajax  this.tableData
                this.$http.get("/student/list",{
                    params:{
                        page:this.page,
                        limit:this.limit,
                        studentNo:this.studentNo.trim(),
                        name:this.name
                    }
                }).then(response=>{
                    console.log(response.data);
                    this.tableData = response.data.data;
                    this.total=response.data.count
                }).catch(error=>{
                    this.$message.error("请求失败")
                })
            },
            // 批量删除
            batchDelete() {
                console.log(this.multipleSelection)
                if (this.multipleSelection.length==0){
                    this.$message.warning("请选择要删除的数据")
                    return
                }

                // 发送请求  删除选中数据
                let ids  = this.multipleSelection
                this.$http.delete("/student/batchDelete",{data:ids}).then(response=>{
                    this.$message.info(response.data.msg)
                    this.load();
                })

            },
            // 编辑回调
            handleEdit(index, row) {
                console.log(index, row);
                // 根据 学生id  查询学生数据
                this.$http.get("/student/"+row.id).then(response=>{
                       this.form =   response.data.data
                })
                this.title = '编辑'
                this.dialogFormVisible = true

            },
            // 显示弹出层
            showDialog() {
                this.title = '添加'
                this.dialogFormVisible = true
            },
            // 删除回调
            handleDelete(index, row) {
                let ids = []
                ids.push(row.id)
                this.$http.delete("/student/batchDelete",{data:ids}).then(response=>{
                    this.$message.info(response.data.msg)
                    this.load();
                })
            },
            // 复选回调
            handleSelectionChange(val) {
                console.log(val)
                this.multipleSelection = val.map(v => v.id);
            },

            //改变每页显示数据条数回调
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                this.limit = val
                this.load();
            },
            //改变页数回调
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                this.page = val
                this.load()
            },
            // 表单提交事件
            search() {
                // 发送请求到后端接口
                console.log('submit!');
                this.load();
            }
        },
        created() {
            this.load()
        }
    }
</script>

<style scoped>
    .el-header {
        text-align: center;
        font-size: 30px;
        margin-top: 15px;
        color: #409EFF;;
    }

    .el-pagination {
        margin-top: 15px;
    }
.el-date-picker{
    width: 100%;
}
</style>